<template>
  <div class="edit-page">
    <!-- 顶部标题区 -->
    <div class="page-header">
      <div>
          <!-- 返回编辑页卡片 -->
          <div class="back-card" @click="goBackToHome">
            <el-icon class="back-icon"><ArrowLeft /></el-icon>
            <span class="back-text">返回首页</span>
          </div>
      </div>
    <div>
          <h2 class="page-title">
            <el-icon><Document /></el-icon>
            当前编辑村：{{ currentRegion }}
          </h2>
          <!-- <p class="page-description">管理 {{ currentRegion }} 表的数据记录，支持增删改查操作</p> -->
     </div>
    </div>

    <!-- 分类卡片 -->
    <div class="cards-container">
      <!-- 建筑类 -->
      <el-card shadow="hover" class="edit-card">
        <div class="card-header">
          <span class="card-title">🏠 建筑类</span>
          <div class="card-actions">
          <!-- <el-button type="primary" @click="goToBuildingTable">
            管理建筑类表
          </el-button> -->
          <el-button type="primary" @click="goToBuildingTable">管理建筑类表</el-button>
          </div>
        </div>
      </el-card>

      <!-- 人员类 -->
      <el-card shadow="hover" class="edit-card">
        <div class="card-header">
          <span class="card-title">👤 人员类</span>
          <div class="card-actions">
            <!-- <el-button type="primary" @click="clickAction('管理人员类表')">管理人员类表</el-button> -->
            <el-button type="primary" @click="goToPersonTable">管理人员类表</el-button>
          </div>
        </div>
      </el-card>

      <!-- 设备类 -->
      <el-card shadow="hover" class="edit-card">
        <div class="card-header">
          <span class="card-title">⚙️ 设备类</span>
          <div class="card-actions">
            <!-- <el-button type="primary" @click="clickAction('管理设备类表')">管理设备类表</el-button> -->
            <el-button type="primary" @click="goToDeviceTable">管理设备类表</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 获取当前路由参数
const route = useRoute()
const router = useRouter()

const currentRegion = ref(route.query.region || '') // 绑定 query 参数
// 如果没传村名，就提示并返回首页
onMounted(() => {
  if (!currentRegion.value) {
    ElMessage.warning('请先选择一个村级行政区')
    router.push('/')
  } else {
    console.log('当前编辑的村：', currentRegion.value)
    // 在这里调用加载接口，比如：
    // loadVillageData(currentRegion.value)
  }
})

// 示例函数：加载该村数据
const loadVillageData = async (villageName) => {
  try {
    const res = await apiService.getVillageData(villageName)
    console.log('已加载数据：', res)
  } catch (err) {
    ElMessage.error('加载该村数据失败')
  }
}

const goHome = () => {
  router.push('/')
}

const clickAction = (name) => {
  ElMessage({
    message: `点击了「${name}」`,
    type: 'success',
    duration: 1500
  })
}


// // 返回编辑页
// const goBackToEditPage = () => {
//   window.history.back()
// }
// 分类页：返回首页
// const goBackToHome = () => {
//   // 首页路径固定
//   // window.location.href = 'http://localhost:3307/'
//   // 或更推荐的 Vue Router 写法（不强制刷新）
//   router.push('/')
// }
const goBackToHome = () => {
  if (router.currentRoute.value.path !== '/') {
    router.push('/')
  } else {
    ElMessage.info('已在首页')
  }
}


//在分类页点击后跳转到属于X区域的X类表
const goToBuildingTable = () => {
  router.push({
    path: '/tables',
    query: {
      region: currentRegion.value,
      // type: 'building'
      type: '建筑类'
    }
  })
}

// 人员类按钮：
const goToPersonTable = () => {
  router.push({
    path: '/tables',
    query: {
      region: currentRegion.value,
      // type: 'person'
      type: '人员类'
    }
  })
}

// 设备类按钮：
const goToDeviceTable = () => {
  router.push({
    path: '/tables',
    query: {
      region: currentRegion.value,
      // type: 'device'
      type: '设备类'
    }
  })
}

</script>

<style scoped>
.back-card {
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: #f5f7fa;
  border-radius: 12px;
  padding: 8px 16px;
  width: fit-content;
  /* margin-bottom: -10px; */
  margin-top: -0px;
  transition: all 0.2s ease;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.08);
}

.back-card:hover {
  background-color: #ecf5ff;
  transform: translateY(-1px);
}

.back-icon {
  margin-right: 8px;
  color: #2687e9;
  font-size: 18px;
}

.back-text {
  font-weight: 500;
  color: #000000;
  font-size: 20px;
}
/* 整体布局 */
.edit-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  background: linear-gradient(145deg, #f6f8fa, #ffffff);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

/* 标题区 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.title-left {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.title-left:hover {
  transform: translateX(-3px);
}

.back-icon {
  font-size: 26px;
  color: #409eff;
  margin-right: 8px;
  transition: color 0.2s ease;
}

.title-left:hover .back-icon {
  color: #66b1ff;
}

.title-text {
  font-size: 22px;
  font-weight: 600;
  color: #303133;
}

.title-right .sub-text {
  font-size: 16px;
  color: #909399;
}

/* 卡片部分 */
.cards-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.edit-card {
  border-radius: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
  background: #fff;
}

.edit-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(64, 158, 255, 0.15);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.card-actions {
  display: flex;
  gap: 12px;
}

/* 按钮风格强化 */
:deep(.el-button) {
  font-size: 16px;
  padding: 12px 22px;
  border-radius: 10px;
  transition: all 0.25s ease;
}

:deep(.el-button:hover) {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 自适应 */
@media (max-width: 768px) {
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
.current-region-banner {
  text-align: center;
  font-size: 16px;
  color: #606266;
  margin-bottom: 2px;
}

.page-header {
  margin-bottom: 24px;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  justify-content: flex-end;
}

.page-description {
  margin: 0;
  text-align: right; 
  color: #909399;
  font-size: 14px;
}
</style>
